import { useState } from "react"
import { useNavigate, useLocation } from "react-router-dom" 
import "./Navigate.css"

const Navigate = ({ activeItem = "用户管理" }) => {
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate() // 添加这行
  const location = useLocation() // 获取当前路径

  const menuItems = [
    {
      id: "user-management",
      name: "用户管理",
      icon: "👥",
      path: "/admin/users",
    },
    {
      id: "post-management",
      name: "帖子管理",
      icon: "📝",
      path: "/admin/posts",
    },
    {
      id: "assessment-management",
      name: "考核管理",
      icon: "📊",
      path: "/admin/assessment",
    },
    {
      id: "torrent-management",
      name: "种子管理",
      icon: "🌱",
      path: "/admin/torrents",
    },
    {
      id: "promotion-management",
      name: "促销活动管理",
      icon: "🎉",
      path: "/admin/promotions",
    },
    {
      id: "report-management",
      name: "举报管理",
      icon: "🚨",
      path: "/admin/reports",
    },
  ]

  const handleItemClick = (item) => {
    if (item.path) {
      navigate(item.path)
    }
  }

  const toggleCollapse = () => {
    setCollapsed(!collapsed)
  }

  // 修改底部菜单项处理
  const handleLogout = () => {
    // TODO: 实现登出逻辑
    localStorage.removeItem("adminToken")
    navigate("/admin/")
  }

  const handleSettings = () => {
    navigate("/admin/settings")
  }

  // 判断当前选中项
  const isActive = (path) => {
    return location.pathname === path
  }

  return (
    <div className={`navigate-container ${collapsed ? "collapsed" : ""}`}>
      <div className="navigate-header">
        <div className="logo">
          <span className="logo-icon">⚡</span>
          {!collapsed && <span className="logo-text">BT-7274后台</span>}
        </div>
        <button className="collapse-btn" onClick={toggleCollapse}>
          {collapsed ? "→" : "←"}
        </button>
      </div>

      <nav className="navigate-menu">
        {menuItems.map((item) => (
          <div
            key={item.id}
            className={`menu-item ${isActive(item.path) ? "active" : ""}`}
            onClick={() => handleItemClick(item)}
          >
            <span className="menu-icon">{item.icon}</span>
            {!collapsed && <span className="menu-text">{item.name}</span>}
            {collapsed && <div className="tooltip">{item.name}</div>}
          </div>
        ))}
      </nav>

      <div className="navigate-footer">
        <div className="menu-item" onClick={handleSettings}>
          <span className="menu-icon">⚙️</span>
          {!collapsed && <span className="menu-text">系统设置</span>}
          {collapsed && <div className="tooltip">系统设置</div>}
        </div>
        <div className="menu-item" onClick={handleLogout}>
          <span className="menu-icon">🚪</span>
          {!collapsed && <span className="menu-text">退出登录</span>}
          {collapsed && <div className="tooltip">退出登录</div>}
        </div>
      </div>
    </div>
  )
}

export default Navigate
